<template>
  <n-flex vertical class="content">
    <div class="top">
      <n-h3 class="title-info">历史上的今天</n-h3>
    </div>
    <n-scrollbar style="max-height: 735px">
      <div class="bottom">
        <n-flex v-for="item in newsList" class="info-item cursor-pointer" @click="onToOpen(item)">
          <div class="img cursor-pointer">
            <img :src="item?.image || 'src/common/image/dog.jpg'" alt="">
          </div>
          <n-flex vertical justify="space-around">
            <h3 style="font-size: 22px;font-weight: 400;">
              {{ (item.year.length <= 3 ? '公元' + item.year : item.year) || '2024' }}-{{
                item.title || '一只修勾'
              }}</h3>
            <div class="desc">
              <n-ellipsis style="max-width: 1000px" :line-clamp="3">
                <div v-html="item.desc"></div>
              </n-ellipsis>
            </div>
            <n-ellipsis style="max-width: 600px">
              来源链接：<a :href="item.link" target="_blank" rel="noopener noreferrer">{{ item.link }}</a>
              <template #tooltip>
                {{ item.link }}
              </template>
            </n-ellipsis>
          </n-flex>
        </n-flex>
      </div>
    </n-scrollbar>
  </n-flex>
</template>

<script setup>
import {apiHistory} from '@/common/api/index.js'
import {onMounted, ref} from "vue";
import {NFlex, NH3, NScrollbar, NEllipsis} from 'naive-ui'

const newsList = ref([])

const onToOpen = (item) => {
  item.link && window.open(item.link)
}

// 初始化
onMounted(async () => {
  try {
    let res = await apiHistory()
    newsList.value = res.result.length && res.result || []
    console.log(newsList.value)
  } catch (err) {
    console.log('error', err)
  }
})
</script>

<style lang="scss" scoped>
a {
  color: red;
}

.content {
  position: relative;
  padding-top: 40px;
}

.top {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.bottom {
  border-top: 1px solid #eeeeee;
}


.title-info {
  border-left: 4px solid #2080f0;
  line-height: 1;
  padding-left: 5px;
  font-size: 20px;
}

.info-item {
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.info-item:hover {
  background-color: #ececec;
}

.img {
  height: 145px;
  max-width: 229px;
  overflow: hidden;

  img {
    width: auto;
    height: 100%;
  }

  img:hover {
    /* 定义2D缩放比例 */
    transform: scale(1.25);
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
  }
}

.desc {
  font-size: 15px;
}


</style>
